<template>
	<view>
		<index v-if="PaheCur=='index'"></index>
		<me v-if="PaheCur=='me'"></me>
			<news v-if="PaheCur=='news'"></news>
			<cases v-if="PaheCur='cases'"></cases>
		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foo">
				<view class="action" @click="NavChange" data-cur="index">
					<view class="cuIcon-cu-image">
						<image v-if="PaheCur=='index'" src="../../static/tabBar/index_cur.png"></image>
						<image v-else src="../../static/tabBar/index.png"></image>
					</view>
					<view :class="PaheCur=='index'?'color_main':'text-gray'">
						首页
					</view>
					
				</view>
				<view class="action" @click="NavChange" data-cur="shop">
					<view class="cuIcon-cu-image">
						<image v-if="PaheCur=='shop'" src="../../static/tabBar/shop_cur.png"></image>
						<image v-else src="../../static/tabBar/shop.png"></image>
					</view>
					<view :class="PaheCur=='shop'?'color_main':'text-gray'">
						会员专享
					</view>
					
				</view>	
				<view  class="action text-gray add-action" data-cur="cases">
						<image  mode='widthFix' class="logo_btn" src="../../static/logo.png"></image>
					<view :class="PaheCur=='cases'?'color_main':'A'">
						组件模板
					</view>
					
				</view>	
				<view class="action"  @click="NavChange" data-cur="news">
					<view class="cuIcon-cu-image">
						<image v-if="PaheCur=='news'" src="../../static/tabBar/order_cur.png"></image>
						<image v-else src="../../static/tabBar/order.png"></image>
					</view>
					<view :class="PaheCur=='news'?'color_main':'text-gray'">
						文章咨询
					</view>
				</view>
					<view class="action"  @click="NavChange" data-cur="me">
					<view class="cuIcon-cu-image">
						<image v-if="PaheCur=='me'" src="../../static/tabBar/me_cur.png"></image>
						<image v-else src="../../static/tabBar/me.png"></image>
					</view>
					<view :class="PaheCur=='me'?'color_main':'text-gray'">
						个人中心
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import index from './index.vue'
	import me from './me.vue'
		import news from './news.vue'
import cases from "./main.vue";	//宅家学
	export default {
			components:{index, me ,news,cases},
		data() {
			return {
				PaheCur:'index'
				
			}
		},
		methods: {
			
			 NavChange(e){
				 //原生的绑定data属性获取值的写法
			     this.PaheCur = e.currentTarget.dataset.cur;
				 
			 }
			
		}
	}
</script>

<style scoped>
	
	.color_main{
		color:#000000;
		font-weight: 900;

	}
.box{
	margin: 21upx 0;
}

.box view.cu-bar{
	margin-top: 20upx;
}

.logo_btn{
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}



</style>
